<template>
    <div>
        <van-nav-bar safe-area-inset-top placeholder :title="$t('RegistrationNo')" left-arrow fixed @click-left="onClickLeft" />
        <van-form @submit="onSubmit">
            <div class="scanBox">
                <div class="tit">{{$t('InputSN')}}</div>
                <van-field 
                    class="input-sn" 
                    type="text"
                    clearable 
                    v-model='inputSn' />
                <div class="img-box" @click="goCamera"></div>
            </div>
            <div class="btnBox">
                <van-button color="linear-gradient(#F9C25F, #F5861A)" :disabled="inputSn==''||inputSn==undefined" round block native-type="submit">
                    {{$t('Next')}}
                </van-button>
            </div>
        </van-form>
        <div class="example">
            <img src="../../assets/example.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            from:sessionStorage.getItem('setFrom'),
            inputSn:this.$route.query.sn
        };
    },
    methods: {
        onClickLeft(){
            this.$router.push({path:this.from});
        },
        goCamera(){
            this.$router.push({path:'/camera',query:{code:1}});
        },
        async onSubmit(){
            this.comm.loadingShow();
            if(this.from=='/login'){
                let data = await this.API.vididateWifiSn(1,{'sn':this.inputSn});
                if(data.exception==0){
                    localStorage.setItem("wifiSN",this.inputSn);
                    this.$router.push({path:'/signone'});
                }else{
                    this.comm.tipsShow('SNinvalid');
                }
            }else{
                let data = await this.API.vididateWifiSnAdd(localStorage.getItem("domain"),{
                    'wifiSn':this.inputSn,
                    'siteId':localStorage.getItem('siteId')||'',
                    'userId':localStorage.getItem('userId')
                });
                if(data.exception==0){
                    localStorage.setItem("wifiSN",this.inputSn);
                    this.$router.push({path:'/addsite'});
                }else{
                    this.comm.tipsShow('SNinvalid');
                }
            }
        }
    },
};
</script>

<style  lang="less" scoped>
.scanBox{
    width: 100%;
    background: #fff;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .tit{
        margin: 20px 0;
        font-size: 14px;
    }
    .input-sn{
        width: 70%;
        border: 1px solid #b9b9b9;
        border-radius: 10px;
    }
    .img-box{
        width: 50px;
        height: 50px;
        margin: 20px auto;
        background: url(../../assets/saoyisao.png) no-repeat center / 100% 100%;
    }
}
.next-button{
    width: 60%;
    text-align: center;
    margin: 0 auto;
    background-color: #B7B8C1;
    padding: 10px 0px;
    border-radius: 10px;
    margin-top:25px;
    color:#fff;
}
.active{
    background-color: #5D606E;
}
.input-sn{
    text-align:center;
}
.example{
    width: 80%;
    margin: 40px auto;
    img{
        width: 100%;
        height: auto;
    }
}
</style>
